<template>
  <div v-if="showAddModal" class="addBank_sm_modal">
      <div class="body vertical center  body_sec">
        <nut-form label-position="top" ref="formRef" class="">
          <div class="flex space_between add_title">
            <span>{{ t('paymentManagement_page_oneUsdt') }}</span>
<!--            <span class="close_icon" @click="closeAddBankModal"></span>-->
          </div>
          <nut-form-item class="yh_item" :label="t('deposit_page_chooseNetWork')">
            <div class="select_dis">
              <span :class="`network_icon network_icon_${form.usdt_type}`"></span>
              <nut-menu>
                <nut-menu-item v-model="form.usdt_type" :options="netWorkArr"/>
              </nut-menu>
            </div>
          </nut-form-item>
          <nut-form-item :label="t('withdraw_page_usdtAdd')">
            <nut-input v-model.trim="form.usdt_addr" :placeholder="t('paymentManagement_page_usdt_tips')" clearable />
          </nut-form-item>
          <nut-form-item :label="t('paymentManagement_page_remark')">
            <nut-input v-model.trim="form.desc" :placeholder="t('paymentManagement_page_usdt_describe')" clearable />
          </nut-form-item>

          <div class="btn_zone flex ">
            <nut-button class="submit_btn center pointer" :disabled="loading" block @click="onSubmit">{{
      t('paymentManagement_page_confirm') }}</nut-button>
          </div>

        </nut-form>

      </div>
  </div>
</template>

<script setup lang='ts'>
import { useI18n } from "vue-i18n";
import { ref, watch } from 'vue';
import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from '@/netBase/NetPacket';
import { showToast } from '@nutui/nutui';
import { netWorkArr, validateCryptoAddress } from '@/utils/publicMethods';

const emit = defineEmits(["getMyBindBankList"]);

const { t } = useI18n();
const showAddModal = ref(true);

// 提交参数
const dataParams = {
  // currency: null,
  usdt_type: 1,
  usdt_addr: '',
  desc: '',
}
const form = ref( // 表单提交
  { ...dataParams }
);
const loading = ref(false);// 是否提交中

const onSubmit = () => {
  if (!form.value.usdt_addr) {
    return showToast.fail(t('paymentManagement_page_usdt_tips'))
  }
  if (!validateCryptoAddress(form.value.usdt_addr, form.value.usdt_type)) {
    return showToast.fail(t('usdt_bind_fail2'))
  }
  handleSubmit()
};
// 绑定银行卡提交
const handleSubmit = () => {
  loading.value = true;
  const req = NetPacket.req_add_usdt_info();
  req.usdt_type = form.value.usdt_type;
  req.usdt_addr = form.value.usdt_addr;
  req.desc = form.value.desc;
  PKwebsocket.instance.send(req, true, {
    callbackName: 'msg_notify_add_usdt_info',
    callback: handleAddBank
  })
};
// result: 2 // 1 成功，2 失败
const handleAddBank = (res: any) => {
  loading.value = false;
  const tips: any = {
    1: 'paymentManagement_page_addBankSuc',
    2: 'paymentManagement_page_errorAdd',
    3: 'paymentManagement_page_addBankFail',
    4: 'paymentManagement_page_hasAdd',
    5: 'paymentManagement_page_hasAdd',
  }
  if (res.result === 1) {
    // closeAddBankModal();
    // emit('getMyBindBankList'); // 刷新列表
    setTimeout(() => {history.go(-1)}, 1000)
    showToast.success(t(tips[res.result]))
  } else {
    showToast.fail(t(tips[res.result]))
  }
}

const showAddBankModal = () => {
  showAddModal.value = true
}
// const closeAddBankModal = () => {
//   showAddModal.value = false
// }

watch(
  () => showAddModal.value,
  (n) => {
    if (n) { // 重置
      form.value.usdt_type = 1;
      form.value.usdt_addr = '';
      form.value.desc = '';
    }
  }
)

defineExpose({
  showAddBankModal
});

</script>

<style lang='scss' scoped>
.addBank_sm_modal {
  height: 374px;
  color: #fff;
  //border-radius: 8px;
  //background: #131232;
  //box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;

  // 弹窗重置样式
  :deep(.nut-popup) {
    border-radius: 0;
  }

  :deep(.nut-action-sheet) {
    background: #27155c;
    width: 100%;
    height: 80vh;
    bottom: 0;
    top: auto;
  }

  .flex {
    display: flex;
  }

  .space_between {
    justify-content: space-between;
  }

  .justify_center {
    justify-content: center;
  }

  .align_center {
    align-items: center;
  }

  .body {
    height: 100%;
    padding: 16px 14px 24px;

    form {
      .add_title {
        font-weight: 400;
        font-size: 14px;
        color: #A8A8CA;
        line-height: 14px;
        margin-bottom: 18px;

        .close_icon {
          width: 18px;
          height: 18px;
        }
      }

      :deep(.nut-cell-group__wrap) {
        box-shadow: none;
        background: none;
        margin: 0;

        .nut-cell {
          background: none;
          padding: 0 !important;
          margin-bottom: 16px;

          &::after {
            border: none;
          }

          &.nut-form-item {
            .nut-form-item__label {
              line-height: 14px;
              margin-bottom: 8px;
              padding: 0;
              color: #fff;
            }
            .nut-input,
            .select_dis {
              position: relative;
              width: 100%;
              height: 44px;
              background: #1D1C3C;
              box-shadow: 0.5px 0.5px 1px 0 #333260 inset;
              border-radius: 8px;
              padding: 12px 10px;

              .input-text::placeholder {
                color: #504F6F !important;
              }
              .nut-menu {
                .nut-menu__bar {
                  background: none !important;
                }
                .nut-menu__title {
                  padding-left: 15px;
                }
              }
              .network_icon {
                display: inline-block;
                position: absolute;
                top: 14px;
                width: 20px;
                height: 20px;
                background: url(/imgs/payment/TRC20.webp) center no-repeat;
                background-size: 100%;
                &.network_icon_2 {
                  background-image: url(/imgs/payment/ERC20.webp);
                }
              }
            }
          }
        }
      }

    }

    .btn_zone {

      .submit_btn {
        color: #fff;
        margin: 16px auto 0;
        font-size: 14px;
        border: 0;
        width: 319px;
        height: 44px;
        border-radius: 8px;
      }
    }

  }

}
:deep(.nut-overlay) {
  top: 15px;
  background: rgba(0, 0, 0, .1);
}
:deep(.nut-menu) {
  .nut-popup {
    width: 347px;
    left: 14px;
    top: 15px;
    background: #1D1C3C;
    border-radius: 8px;
    * {
      color: #fff;
    }
    .nut-menu-item__content {
      padding: 0;
      .nut-menu-item__option {
        box-sizing: border-box;
        height: 48px;
        padding: 0 14px;
        border-bottom: 0.5px solid #333260;
        &.active {
          background: #333260;
        }
      }
    }
  }

}
</style>
